<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        document.body.innerHTML = `
        <div onclick = "console.log('Handled outside:',event.target)">
            <p onclick = "console.log('hahahaha')">Foo</p>    
        </div>
        `;

        // 事件重定向的意义在于，前者的event.target就是那个slot中的元素，不会变了
        // 而后者的target分别是影子宿主和影子DOM元素,这就是所谓的：事件貌似是影子宿主触发的而不是其中的包装元素触发的，这也就是事件重定向
        // document.querySelector("div").attachShadow({mode:"open"}).innerHTML = `<div onclick = "console.log('Handled inside:',event.target)"><slot></slot></div>`
        document.querySelector("div").attachShadow({mode:"open"}).innerHTML = `<div onclick = "console.log('Handled inside:',event.target)">Foo</div>`

    </script>
</body>
</html>